<template>
  <div class="stationInfo">
    <TitleColumn name="站点信息" />
    <div class="content">
      <div class="header">
        <div class="mask">
          <div class="total_info">设备总数 <span>344</span>个</div>
          <div class="other_info">
            <div class="online_info">
              <img src="./images/online_icon.png" alt="" />
              在线总数
              <span>24</span>
              个
            </div>
            <div class="offline_info">
              <img src="./images/offline_icon.png" alt="" />
              离线总数
              <span>320</span>
              个
            </div>
          </div>
        </div>
      </div>

      <div class="scroll_main">
        <vue3ScrollSeamless
          class="warnScrollWrap"
          :classOptions="{ step: 0.3 }"
          :dataList="state.statisticsData"
        >
          <ul class="list">
            <li
              class="listItem"
              v-for="(item, index) in state.statisticsData"
              :key="index"
            >
              <h3 class="title">水位站设备总数</h3>
              <div class="left">
                <img src="./images/station.png" alt="" />
              </div>
              <div class="right">
                <div class="dataListItem1">
                  <p>在线总数</p>
                  <Percentage :num="20" />
                  <h3>212个</h3>
                </div>
                <div class="dataListItem2">
                  <p>离线总数</p>
                  <Percentage :num="70" />
                  <h3>130个</h3>
                </div>
              </div>
            </li>
          </ul>
        </vue3ScrollSeamless>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import TitleColumn from "@/components/TitleColumn";
import { CountTo } from "@gui-pkg/components";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";
import Percentage from "./Percentage.vue";

const state = reactive({
  statisticsData: [1, 2, 3, 4, 5],
});
onMounted(() => {});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.stationInfo {
  width: 100%;
  .content {
    width: 100%;
    height: calc(100% - 24px);
    background: #02123433;
    backdrop-filter: blur(10px);
    overflow: hidden;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    .header {
      padding: 10px 16px;
      .mask {
        width: 100%;
        height: 50px;
        border: 0.58px solid rgba(2, 110, 194, 0.16);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .total_info {
          width: 148px;
          height: 50px;
          color: #fff;
          background: url(./images/left_bg.png) no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            font-family: DIN Alternate;
            font-size: 18px;
            font-weight: 700;
            margin: 0 2px;
          }
        }

        .other_info {
          display: flex;
          justify-content: center;
          align-items: center;
          div {
            width: 186px;
            height: 32px;
            color: #fff;
            font-family: Source Han Sans CN;
            font-size: 12px;
            font-weight: 400;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 20px;
            span {
              font-family: DIN Alternate;
              font-size: 18px;
              font-weight: 700;
              margin: 0 4px;
            }
            img {
              width: 24px;
              margin-right: 10px;
              transform: translateY(2px);
            }

            &.online_info {
              background: url(./images/online_bg.png) no-repeat;
              background-size: 100% 100%;
            }
            &.offline_info {
              background: url(./images/offline_bg.png) no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
    }

    .warnScrollWrap {
      width: 100%;
      height: 100%;
      overflow: hidden;
      ul.list {
        display: flex;
        flex-direction: column;
        li.listItem {
          width: 100%;
          height: 74px;
          background: url(./images/list_bg.png) no-repeat;
          background-size: contain;
          position: relative;
          h3.title {
            color: #fff;
            position: absolute;
            top: -10px;
            left: 60px;
            font-size: 12px;
            font-weight: bold;
            font-style: italic;
          }
          .left {
            width: 66px;
            height: 66px;
            position: absolute;
            top: 0px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img {
              width: 20px;
            }
          }
          .right {
            .dataListItem1,
            .dataListItem2 {
              display: flex;
              align-items: center;
              position: absolute;
              left: 74px;
              top: 14px;
              p {
                font-size: 11px;
                color: #b4dfff;
                margin-right: 8px;
              }
              h3 {
                font-size: 11px;
                color: #b4dfff;
                margin-left: 8px;
              }
            }
            .dataListItem2 {
              position: absolute;
              left: 74px;
              top: 45px;
              ::v-deep(.line1) {
                background: linear-gradient(
                  179.98deg,
                  #fdd82e -34.46%,
                  #d74400 46.9%,
                  rgba(139, 39, 0, 0) 117.21%
                );
              }
              ::v-deep(.line2) {
                background: linear-gradient(
                  179.98deg,
                  #fdd82e -34.46%,
                  #ff702e 46.9%,
                  rgba(232, 73, 9, 0) 117.21%
                );
              }
            }
          }
        }
      }
    }
  }
}
</style>
